<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="../style/firstIndex.css">
    <link rel="stylesheet" href="../plugin/element-ui/index.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="main">
    <div id="index_app">
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item> <a href="../page/firstIndex.html">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item>店铺信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin-top: 20px">
            <div id="showCategory"></div>
            <div id="showTime"></div>
        </div>
        <div>
            <div class="cakeSaleStatus">
                <span>待付款</span>
                <el-progress :text-inside="true" :stroke-width="22" :percentage="70"></el-progress>
                <span>出售完成</span>
                <el-progress :text-inside="true" :stroke-width="22" :percentage="100" status="success" ></el-progress>
                <span>待评价</span>
                <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning" ></el-progress>
            </div>
            <div>
                <div class="time">当前时间：<br><br>

                    <span id="y"></span>年

                    <span id="mo"></span>月

                    <span id="d"></span>日

                    <span id="h"></span>时

                    <span id="m"></span>分

                    <span id="s"></span>秒
                    <span id="time1">1</span>//调用show()函数
                </div>

            </div>
        </div>
    </div>
</div>

</body>
<script src="../plugin/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugin/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugin/axios/axios.min.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/firstIndex.js"></script>
<script src="../js/login.js"></script>
<script>
    let app = new Vue({
        el: "#index_app",
        data() {
            return {
                categoryName:[],
                cakeNum:[],
                num:[]
            }
        },
        async mounted(){
            var myChart = echarts.init(document.getElementById('showCategory'));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '蛋糕种类及其数量展示',
                    x:'center'
                },
                tooltip: {},
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10]
                }]
            });
            let res = await getCategory()
            let resNum = await getNum()
            this.cakeNum=resNum
            if(res.data.code==1){
                for(let i=0;i<res.data.data.length;i++){
                    let name=res.data.data[i].name
                    this.categoryName.push(name)
                }
            }
        //     for(let i =0;i<res.data.data.length;i++){
        //         console.log(this.cakeNum.data.data)
        //         for(let j=0;j=this.cakeNum.data.data.length;j++){
        //             console.log(this.cakeNum.data.data[j].cid)
        //             if(this.cakeNum.data.data[j].cid==res.data.data[i].id){
        //                 this.num.push(this.cakeNum.data.data[j].num)
        //             }
        //     }
        //     this.num.push("0")
        //
        // }
            myChart.setOption({
                xAxis: {
                    data: this.categoryName
                }
            });
        },
        created(){
            this.init()
        },
        methods: {
            async init(){}
        }
    })
</script>
<script>

</script>

</html>